<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-form label-width="70px" size="small" v-formkey="{query:crud.toQuery}">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="班次名称">
                <el-input v-model="query.keyword" placeholder="输入班次名称搜索"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <rrOperation :crud="crud"/>
      </div>
      <crudOperation :permission="permission"/>
    </div>
    <!-- 表单渲染 -->
    <el-dialog :before-close="crud.cancelCU" :close-on-click-modal="false" :title="crud.status.title"
               :visible.sync="crud.status.cu > 0" append-to-body width="520px">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="80px" size="small">
        <el-form-item label="班次编码" prop="code">
          <el-input v-model="form.code" style="width: 145px;"/>
        </el-form-item>
        <el-form-item label="班次名称" prop="name">
          <el-input v-model="form.name" style="width: 145px;"/>
        </el-form-item>
        <el-form-item label="上班时间定义" label-width="85px" prop="timeUp">
          <el-radio-group v-model="form.timeUp" style="width: 136px;" @change="onTimeUp">
            <el-radio label="dang">单休</el-radio>
            <el-radio label="duo">多休</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="休息时间定义" label-width="85px" prop="dataScope1">
          <el-select value-key="label" v-if="multiple" v-model="form.dataScope1" :multiple="form.timeUp==='duo'" placeholder="请选择休息时间"
                     style="width: 145px">
            <el-option
              v-for="item in dateScopes"
              :key="item.label"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="签到时间" prop="startTime">
          <el-time-select
            style="width: 145px;"
            placeholder="选择起始时间"
            v-model="form.startTime"
            :picker-options="{start: '08:30',
            step: '00:15',
            end: '18:30'
            }"/>
        </el-form-item>
        <el-form-item label="签退时间" prop="endTime">
          <el-time-select
            style="width: 145px;"
            placeholder="选择签退时间"
            v-model="form.endTime"
            :picker-options="{start: '08:30',
            step: '00:15',
            end: '18:30'
            }"/>
        </el-form-item>
        <el-form-item label="是否定位限制" label-width="85px" prop="dingW">
          <el-switch v-model="form.dingW" style="width: 140px;"/>
        </el-form-item>
        <el-form-item label="定位地点" prop="address">
          <el-input v-model="form.address" style="width: 145px;"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" rows="5" style="width: 380px;" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <div class="body-container">
      <!--表格渲染-->
      <el-table ref="table" stripe border v-loading="crud.loading"
                height="600"
                @row-click="crud.selectRow"
                :row-style="crud.rowClass"
                :row-class-name="crud.tableRowClassName"
                :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60"/>
        <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('code')" prop="code" label="编码"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('name')" prop="name" label="名称"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('name')" prop="name" label="班次"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="上班时间定义"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="休息时间定义"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="签到时间"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="签退时间"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="是否定位限制"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="定位地点"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="状态"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="备注"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="创建人"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="创建时间"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="启用人"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('time')" prop="time" label="启用时间"/>
        <el-table-column :render-header="crud.renderHeader" v-permission="['admin','basGoods:edit','basGoods:del']" label="操作" width="150px"
                         align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
  import crudBasGoods from '@/api/erp/classesIndex'
  import CRUD, {crud, form, header, presenter} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'

  // crud交由presenter持有
  const defaultCrud = CRUD({
    title: '班次', url: 'api/basGoods', sort: 'id,desc', crudMethod: {...crudBasGoods}, optShow: {
      add: true,
      edit: true,
      del: true,
      download: false,
      leadingIn: false,
      enable: true,
      disable: true,
    },
    props: {
      tableColumns: [
        'name',
        'code'
      ]
    }
  });
  const defaultForm = {
    code: null,
    name: null,
    timeUp: 'dang',
    dataScope1: '',
    startTime: null,
    endTime: null,
    dingW: null,
    address: null,
    remark: null
  };
  export default {
    name: 'classesIndex',
    components: {pagination, crudOperation, rrOperation, udOperation},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    dicts: ['t_bas_goods_type', 'common_status', 't_bas_goods_buy_sale_type', 'common_yes_or_no',
      't_bas_goods_price_type', 't_bas_goods_expiration_unit', 't_bas_goods_level', 't_bas_goods_source_type'],
    data() {
      return {
        multiple: true,
        dateScopes: [{//星期选择
          label: '星期一', value: '1'
        }, {
          label: '星期二', value: '2'
        }, {
          label: '星期三', value: '3'
        }, {
          label: '星期四', value: '4'
        }, {
          label: '星期五', value: '5'
        }, {
          label: '星期六', value: '6'
        }, {
          label: '星期天', value: '0'
        }],
        permission: {
          //add 不添加权限，这个add按钮自定义
          add: ['admin'],
          edit: ['admin', 'basGoods:edit'],
          del: ['admin', 'basGoods:del'],
          enable: ['admin', 'basGoods:enable'],
          disable: ['admin', 'basGoods:disable'],
        },
        rules: {},
        brandList: [],
        typeList: []
      }
    },
    watch: {},
    created() {
      // this.getTypeList()
    },
    methods: {
      // getTypeList() {
      //   getTypeList({page: 0, size: 999}).then(res => {
      //     this.typeList = res
      //   })
      // },
      //点击上班定义
      onTimeUp(data) {
        this.form.dataScope1 = data === 'duo' ? [] : '';
        this.multiple = false;
        setTimeout(()=>{
          this.multiple = true;
        },500)
      },
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null || node.children.length == 0) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
      },
      //添加提交
      [CRUD.HOOK.afterValidateCU](crud) {
        if (crud.form.dataScope === '自定义' && crud.form.depts.length === 0) {
          this.$message({
            message: '自定义数据权限不能为空',
            type: 'warning'
          })
          return false
        } else if (crud.form.dataScope === '自定义') {
          const depts = []
          crud.form.depts.forEach(function (data, index) {
            const dept = {id: data}
            depts.push(dept)
          })
          crud.form.depts = depts
        } else {
          crud.form.depts = []
        }
        return true
      }
    }
  }
</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
